import React, { useRef } from 'react';
import { Form, Space, Button } from 'antd';
import { SyncOutlined } from '@ant-design/icons';
import { CmdbContent, CmdbHeader, Authorized } from '@/components';
import permission from '@/config/permission';
import TaskListQuery from './TaskListQuery';
import TaskList from './TaskList';
import CreateTaskModal from './CreateTaskModal';
import OperationLogModal from './OperationLogModal';

/**
 * 导入任务管理
 */
function ResourceImportTasks () {
  // 表格ref
  const taskListRef = useRef();
  // 导入ref
  const createTaskModalRef = useRef();
  // 操作日志弹框ref
  const operationLogModalRef = useRef();

  const [form] = Form.useForm();

  return (
    <CmdbContent>
      <CmdbHeader title="导入任务管理" />
      <div className="back-white padding-10">
        <div className="padding-10">
          <TaskListQuery
            form={form}
            onQuery={() => {
              taskListRef.current.search.submit();
            }}
          />
        </div>
        <div className="padding-10">
          <Space>
            <Authorized authority={permission.resourceImportTasks_create} noMatch={null}>
              <Button
                type="primary"
                onClick={() => {
                  createTaskModalRef.current.open();
                }}
              >
                导入
              </Button>
            </Authorized>
            <Authorized authority={permission.resourceImportTasks_viewOperationLog} noMatch={null}>
              <Button
                onClick={() => {
                  operationLogModalRef.current.open();
                }}
              >
                操作日志
              </Button>
            </Authorized>
            <Button
              icon={<SyncOutlined />}
              onClick={() => {
                taskListRef.current.refresh();
              }}
            />
          </Space>
        </div>

        {/* 表格弹框 */}
        <div className="padding-10">
          <TaskList ref={taskListRef} form={form} />
        </div>
      </div>
      {/* 导入弹框 */}
      <CreateTaskModal
        ref={createTaskModalRef}
        onSuccess={() => {
          taskListRef.current.refresh();
        }}
      />
      {/* 操作日志弹框 */}
      <OperationLogModal ref={operationLogModalRef} />
    </CmdbContent>
  );
}

export default ResourceImportTasks;
